<template>
  <div class="add-category-con">
    <a-modal :mask-closable="false" :visible="visible" @before-open="open" :on-before-ok="handleOk" @cancel="handleCancel" title-align="start">
      <template #title> {{ title }} </template>
      <div>
        <a-form ref="formRef" size="medium" :model="form">
          <a-form-item field="name" label="类目名称" :rules="rules.name">
            <a-input v-model="form.name" placeholder="请输入" />
          </a-form-item>
          <a-form-item field="code" label="编号" :rules="rules.code">
            <a-input v-model="form.code" placeholder="请输入" />
          </a-form-item>
          <a-form-item field="parentCode" label="父级">
            <a-cascader check-strictly :options="categoryList" :field-names="{ value: 'id', label: 'name' }" v-model="form.parentId" placeholder="请选择" allow-clear />
          </a-form-item>
          <a-form-item field="description" label="描述">
            <a-input v-model="form.description" placeholder="请输入" :max-length="45" show-word-limit />
          </a-form-item>
          <a-form-item field="status" label="状态">
            <a-switch v-model="form.status" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, computed, reactive } from 'vue'
  import { saveCateGoryData } from '@/api/product'
  import { Message } from '@arco-design/web-vue'
  import { addPropsType } from '../type'
  import _ from 'lodash-es'
  export default defineComponent({
    name: 'addCateGory',
    emits: ['save'],
    props: ['detail', 'categoryList'],
    setup(props: addPropsType, { emit }) {
      let visible = ref(false)
      const form = ref({
        name: '',
        description: '',
        code: '',
        parentId: '',
        status: true,
      }) as any
      const formRef = ref()
      const options = []

      const rules = {
        name: [{ required: true, message: '请输入类目名称' }],
        code: [{ required: true, message: '请输入编号' }],
      }

      const handleOk = (done: any) => {
        formRef.value.validate(async (valid: any) => {
          if (!valid) {
            try {
              const res: any = await saveCateGoryData(form.value)
              if (res.code == 'SUCCESS') {
                visible.value = false
                props.detail.type == 'add' ? Message.success('新增成功') : Message.success('编辑成功')
                formRef.value.resetFields()
                form.value = {
                  name: '',
                  description: '',
                  code: '',
                  parentId: '',
                  status: true,
                }
                emit('save')
                done(true)
              }
            } catch (error) {
              done(true)
            }
          } else {
            done(true)
          }
        })
      }
      const handleCancel = () => {
        formRef.value.resetFields()

        form.value = {
          name: '',
          description: '',
          code: '',
          parentId: '',
          status: true,
        }
        visible.value = false
      }

      const title = computed(() => {
        if (props.detail.type == 'add' || props.detail.type == 'addSub') {
          return '新增类目'
        } else {
          return '编辑类目'
        }
      })

      const open = () => {
        if (props.detail.type == 'edit') {
          form.value = _.cloneDeep(props.detail.data)
        } else if (props.detail.type == 'addSub') {
          console.log(props.detail)
          form.value.parentId = props.detail.data.id
        } else {
          form.value = {
            name: '',
            description: '',
            code: '',
            parentId: '',
            status: true,
          }
        }
      }

      return { visible, handleOk, open, handleCancel, title, form, rules, formRef }
    },
  })
</script>

<style lang="less" scoped>
  .add-category-con {
  }
</style>
